<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="resource/bifavi.ico" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="res/static/css/main.css">
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<script type="text/javascript" src="res/layui/layui.js"></script>
<script type="text/javascript" src="res/layui/jquery-1.10.2.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style type="text/css">
.address {
	padding-top: 30px;
	padding-left: 355px;
	padding-bottom: 50px;
}

.info {
	width: 237px;
	height: 106px;
	display: inline-block;
	/* background-image: url(""); */
}

.table {
	width: 1200px;
	margin-left: 355px;
}

.order-content.item-content.th-item.item-cont.iiiiuniu {
	width: 0px;
}

.img {
	width: 100px;
	height: 100px;
}
</style>
<title>皇室蛋糕</title>
<script type="text/javascript">
	$(function() {
		$("div.info").click(function() {
			$(".info").css("background-image", "url('')");
			$(this).css("background-image", "url('images/mail_1.png')");
			console.log("鼠标点击,背景变红");
		});
	})
</script>
<script type="text/javascript">
	window.onload = function() {
		//声明查询获取所有Id为Info的元素
		var info = document.querySelectorAll("div[class='info']")
		//声明数组，原型，切片  
		var fArr = Array.prototype.slice.call(info);
		//创建“dom”函数  
		fArr.forEach(function(dom) {
			//添加mouseover鼠标事件  
			dom.addEventListener('mouseover', function() {
				//鼠标[经过]相关div图层时，其背景色变为“#F2F2F2”色  
				if (this.style.backgroundColor != "red") {
					this.style.backgroundColor = "#F2F2F2";

				}
				console.log("鼠标经过");
			});
			//添加mouseout鼠标事件  
			dom.addEventListener("mouseout", function() {
				//鼠标[离开]相关div图层时，其背景色变为白色  
				// this.style.backgroundColor = "#FFFFFF";   
				console.log("鼠标挪走");
				if (this.style.backgroundColor != "red") {
					console.log("鼠标挪走,背景灰色");
					this.style.backgroundColor = "#FFFFFF"
				}
			});
		});
	}
</script>

</head>
<body>

	<div class="site-nav-bg">
		<div class="site-nav w1200">
			<p class="sn-back-home">
				<i class="layui-icon layui-icon-home"></i> <a href="index.jsp">首页</a>
			</p>
			<div class="sn-quick-menu">
				<div class="login">
				<c:if test="${CURR_COM == null }">
						<a href="goConsumerLogin">登录</a>
					</c:if>
					<c:if test="${CURR_COM != null }">
						<a href="gopersoninfo"><c:out value="${CURR_COM}" /></a>  &nbsp; &nbsp; &nbsp;
						<a href="zhuxiao">注销</a>
					</c:if>
				</div>
				<div class="sp-cart">
					<a href="goshopcar">购物车</a><span><c:if
							test="${CURR_NUM == null }"></c:if> <c:if
							test="${CURR_NUM != null }">
							<c:out value="${CURR_NUM}" />
						</c:if></span>
				</div>
			</div>
		</div>
	</div>



	<div class="header">
		<div class="headerLayout w1200">
			<div class="headerCon">
				<h1 class="mallLogo">
					<a href="index.jsp" title="皇室蛋糕"> <img
						src="images/img/logo1.png">
					</a>
				</h1>
				<div class="mallSearch">
					<form action="goSearchJsp" class="layui-form" novalidate>
						<input type="text" name="title" required lay-verify="required"
							autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
						<button class="layui-btn" lay-submit lay-filter="formDemo">
							<i class="layui-icon layui-icon-search"></i>
						</button>
						<input type="hidden" name="" value="">
					</form>
				</div>
			</div>
		</div>
	</div>
	<%-- 	${AddressInfo.addressInfo[0].aid} --%>
	<h3 style="padding-left: 355px; padding-top: 20px;">
		<span style="font-weight: bold;">选择收货地址 </span>
		<button style="margin-left: 900px;" type="button"
			class="btn btn-success" data-toggle="modal"
			data-target="#exampleModal" data-whatever="@mdo">新增收货地址</button>
	</h3>
	<!-- 新增用户模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">添加收货地址</h4>
				</div>
				<div class="modal-body">
					<form  id="insertAddress" action="getInsertAddressInfo" method="get">
						<div class="form-group">
							<label for="addressName" class="control-label">收货人</label> <input
								type="text" class="form-control" id="addressName" name="addressName">
						</div>
						<div class="form-group">
							<label for="messageAddress" class="control-label">地址</label>
							<textarea class="form-control" id="messageAddress" name="messageAddress"></textarea>
						</div>
					<div class="form-group">
						<label for="messageTel" class="control-label">联系方式</label>
						<textarea class="form-control" id="messageTel" name="messageTel"></textarea>
					</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-info" onclick="add_info()">立即添加</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">我在想想</button>
				</div>
			</div>
		</div>
	</div>
	
<script>
    function add_info()
    {
        var form = document.getElementById('insertAddress');
        form.submit();      
    }
</script>

	<script type="text/javascript">
		$(function(){
			$(".info").click(function(){
				//var  address=$(this).children().text();
				//获取点击到的地址栏信息
				var  address=$(this).children().find("span").eq(0).text();
				console.log("00000000000000000"+address+"00000000000000000");
				var sendAddress=$("#sendAddress").val();
				//对订单中的地址栏赋值
				sendAddress=address;
				$("#sendAddress").val(sendAddress)
				console.log("------9999----"+sendAddress);
				//点击获取收件人的姓名
				var name=$(this).children().find("span").eq(1).text();
				console.log("1111111111111111"+name);
				//对订单的收件人栏赋值
				var Ordername=$("#orderCusomer").val();
				Ordername=name;
				$("#orderCusomer").val(Ordername);
				//点击获取收件人里联系方式
				var tel=$(this).children().find("span").eq(2).text();
				//对联系方式栏赋值
				var orderTel=$("#orderTel").val();
				orderTel=tel;
				$("#orderTel").val(orderTel);
				//获取用户主键Id
				var cid=$(this).children().find("input").eq(0).val();
				console.log("&&&&&&&&&&&&&&&&&"+cid);
				//封装用户主键
				var hiddenCid=$("#hiddenCid").val();
				hiddenCid=cid;
				$("#hiddenCid").val(hiddenCid);
			})
		})
	</script>
	<div class="address">
		<div class="info">
			<div>
				&nbsp;<br> &nbsp;&nbsp;<span class="Curr_Address">${consumserInfo.caddress}</span>
				&nbsp;&nbsp;(<span  class="Curr_name">${consumserInfo.cname}</span>&nbsp;收)
				<hr>
				&nbsp;&nbsp;<span class="Curr_tel">${consumserInfo.ctel }</span>
				<input type="hidden" value="${consumserInfo.cid}">
			</div>
		</div>
		<c:forEach items="${AddressInfo}" var="address" varStatus="i">
			<div class="info">
				<div>
					&nbsp;<br> &nbsp;&nbsp;<span class="Curr_Address">${address.address}</span>
					&nbsp;&nbsp;(<span class="Curr_name">${ address.name}</span>&nbsp;收)
					<hr>
					&nbsp;&nbsp;<span class="Curr_tel">${address.tel }</span> 
					<input type="hidden" value="${address.consumer.cid}">
				</div>
			</div>
		</c:forEach>
	</div>

	<div>
		<table class="table table-hover">
			<tbody>
				<tr>
					<td>商品</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
			</tbody>
			<c:forEach items="${map.slist}" var="slist" varStatus="i">
				<tr>
					<td><div>
							<img alt="" src="images/Fruits/${slist.scname}.png" class="img">
						</div>${slist.scname}</td>
					<td class="price">${slist.scPrice}</td>
					<td class="num">${slist.scnum}</td>
					<td class="count">${slist.count}</td>
				</tr>
			</c:forEach>
		</table>
	</div>

<%-- ${map.slist.cid }${map.slist.sc_status }
 --%><%-- 	<div
		style="margin-left: 1460px; width: 100px; height: 100px; border: solid 1px red;">
		<span>实付款</span>
		<div id="countPrice">${sum}</div>
		<span>寄送至</span>
		<div id="endAddress"></div>
		<span>收货人</span>
		<div id="consumer"></div>
		<button>结算</button>
	</div> --%>
	<div style="margin-left: 1300px; width: 300px; height:300x; ">
		<form action="sendOrder" method="get">
			<div class="form-group">
				<label for="exampleInputEmail1">实付款:</label> <input
					type="text" class="form-control" id="sumCount" value="${sum}" disabled="disabled">
					<input type="hidden" name="sumCount" value="${sum}">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">寄送至:</label> <input
					type="text" class="form-control" id="sendAddress" name="sendAddress"  readonly="readonly">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">收件人:</label> <input
					type="text" class="form-control" id="orderCusomer" name="orderCusomer" readonly="readonly">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">联系方式:</label> <input
					type="text" class="form-control" id="orderTel"  name="orderTel" readonly="readonly">
			</div>
			<input type="hidden" id ="hiddenCid" name="hiddenCid">
			<button style="margin-left:0; width: 300px;" type="submit" class="btn btn-success">结算</button>
		</form>
	</div>
	<!-- <script type="text/javascript">
  layui.config({
    base: 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery','element','car'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car;
    
    // 模版导入数据
     var html = demo.innerHTML,
     listCont = document.getElementById('list-cont');
     mm.request({
       url: 'goshopcart',
       success : function(res){
         listCont.innerHTML = mm.renderHtml(html,res)
         element.render();
         car.init()
       },
       error: function(res){
         console.log(res);
       }
     }) -->
	<!-- 底部 -->
	<div class="footer">
		<div class="ng-promise-box">
			<div class="ng-promise w1200">
				<p class="text">
					<a class="icon1" href="javascript:;">7天无理由退换货</a> <a class="icon2"
						href="javascript:;">满99元全场免邮</a> <a class="icon3"
						style="margin-right: 0" href="javascript:;">100%品质保证</a>
				</p>
			</div>
		</div>
		<div class="mod_help w1200">
			<p>
				<a href="aboutUs">关于我们</a> <span>|</span> <a href="helpCenter">帮助中心</a>
				<span>|</span> <a href="afterService">售后服务</a> <span>|</span> <a
					href="javascript:;">客服资讯</a> <span>|</span> <a href="javascript:;">关于货源</a>
			</p>
			<p class="coty">皇室蛋糕版权所有 &copy; 2018-2020</p>
		</div>
	</div>
	<script>
		layui
				.use(
						[ 'element', 'form', 'jquery', 'laydate' ],
						function() {
							var element = layui.element;
							var table = layui.table;
							var form = layui.form;
							var $ = layui.jquery;
							var laydate = layui.laydate;

							laydate.render({
								elem : '#birthday',
								type : "datetime"
							});

							form
									.verify({
										birthdayVerify : [
												/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/,
												'日期格式不正确' ]
									});

							form.on('submit(add)', function(data) {
								console.log(data.field);
								var val = data.field;

								var fields = $("#fromclass").serialize();
								console.log("********************");
								console.log(fields);
								$.getJSON("" + fields, function(json) {
									alert("JSON Data: " + json.users[3].name);
								});
								/* 
								$.post("TianJiaProvider",{fields},function(result){
									//document.getElementById("txtHint").innerHTML = result;
									 console.log(val);
									
								},"JSON"); */

								layer.msg("添加成功！", {
									icon : 6,
									time : 1000,
									anim : 4
								}, function() {
									parent.layer.close(parent.layer
											.getFrameIndex(window.name));
								});
								return false;
							});
						})
	</script>
	<script type="text/javascript">
		layui
				.config({
					base : 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
				})
				.use(
						[ 'mm', 'jquery', 'element', 'car' ],
						function() {
							var mm = layui.mm, $ = layui.$, element = layui.element, car = layui.car;

							// 模版导入数据
							var html = demo.innerHTML, listCont = document
									.getElementById('list-cont');
							mm.request({
								url : 'goshopcart',
								success : function(res) {
									listCont.innerHTML = mm.renderHtml(html,
											res)
									element.render();
									car.init()
								},
								error : function(res) {
									console.log(res);
								}
							})

						});
	</script>
</body>
</html>